<template>
  <div class="musicListDetail">
    <div class="musicListDesc">
      <div class="musicListDesc-left">
        <img v-lazy="musicListInfo.img" alt="" v-if="musicListInfo" />
      </div>
      <div class="musicListDesc-center">
        <div class="mld-center-title">
          <div class="mld-center-title_left">歌单</div>
          <div class="mld-center-title_right">
            <h3>{{ musicListInfo.name }}</h3>
          </div>
        </div>
        <div class="mld-center-author">
          <el-avatar :src="musicListInfo.creatorAvatar"></el-avatar>
          <span class="author_name">{{ musicListInfo.creatorName }}</span>
          <span class="create_time">{{ createdTime }}创建</span>
        </div>
        <div class="mld-center-action">
          <el-button
            type="primary"
            round
            icon="el-icon-caret-right"
            size="medium"
            >播放全部</el-button
          >
        </div>
        <div class="mld-center-desc">
          <div class="mld-center-desc-tags">
            <span>标签：</span>
            <ul class="breadcrumb-tags">
              <li
                v-for="(tag, index) of tags"
                :key="index"
                class="breadcrumb-tags-item"
              >
                <span>{{ tag }}</span>
              </li>
            </ul>
          </div>
          <div class="mld-center-desc-music">
            <span>歌曲：{{ musicListInfo.trackCount }}</span>
            <span>播放：{{ musicListInfo.playCount }}</span>
          </div>
          <div class="mld-center-desc-introduction">
            <span :class="'mld-center-desc-introduction-' + expandIntro"
              >简介：{{ musicListInfo.title }}</span
            >
            <div class="expand-introduction" @click="toggleExpand">
              <i class="iconfont" v-if="expandIntro === 'close'">省略</i>
              <i class="iconfont" v-if="expandIntro === 'open'">不省略</i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="musicList">
      <el-tabs @tab-click="changeTabs">
        <el-tab-pane label="歌曲列表" >
          <song-list :songList="songList"></song-list>
        </el-tab-pane>
        <el-tab-pane label="评论">
          <recommends :showTextarea="true" :recommends="playListComments" :total="totalComments" @updateRecom="getPlaylistComment"></recommends>
        </el-tab-pane>
        <el-tab-pane label="收藏者"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  _getMusicListDetail,
  _getSongsDetail,
  _getPlaylistComment,
  musicListDetial_Info,
  songDetail_Info,
} from "network/detail";
import moment from "moment";
import songList from "components/common/songList/songList";
import recommends from "./recommends"
export default {
  components: {
    songList,
    recommends
  },
  data() {
    return {
      musicListInfo: null,
      expandIntro: "close",
      songList: [],
      loading: true,
      playListComments: null,
      totalComments: 0,
      musciListId: null,
    };
  },
  watch: {
    $route: function (route) {
      if (route.name && route.name === "musicListDetail") {
        localStorage.setItem("musicListDetail_Id", route.params.id);
        this.musciListId = route.params.id
        this.getMusicListDetail(route.params.id);
      }
    },
  },
  computed: {
    createdTime() {
      return moment(this.musicListInfo.createTime).format("YYYY-MM-DD");
    },
    tags() {
      // return this.musicListInfo.tags.join(" / ");
      return this.musicListInfo.tags;
    },
  },
  created() {
    this.getMusicListDetail();
  },
  methods: {
    async getMusicListDetail(musciListId) {
      let loadingInstance = this.$Loading({
        target: document.querySelector(".dance-music-article"),
        lock: true,
        text: '在加载啦~'
        })
      if (!musciListId && localStorage.getItem("musicListDetail_Id")) {
        musciListId = localStorage.getItem("musicListDetail_Id");
        this.musciListId = musciListId
      }
      let res = await _getMusicListDetail(musciListId);
      if (res.status === 200 && res.data) {
        this.musicListInfo = new musicListDetial_Info(res.data.playlist);
        let trackIds = res.data.playlist.trackIds;
        let songListIds = [];
        trackIds.map((trackId) => {
          songListIds.push(trackId.id);
        });
        // 获取歌单列表
        _getSongsDetail(songListIds.join(",")).then((res) => {
          if (res.status === 200) {
            this.songList = [];
            res.data.songs.map((song) => {
              this.songList.push(new songDetail_Info(song));
            });
            this.$nextTick(() => {
              loadingInstance.close()
            })
          }
        });
        this.getPlaylistComment()
      }
    },
    /** 获取歌单评论 */
    getPlaylistComment(offset) {
      let limit = 30
      _getPlaylistComment(this.musciListId, limit, offset).then(res => {
        console.log(res);
        if (res.status === 200 && res.data.code === 200) {
          this.playListComments = res.data.comments
          this.totalComments = res.data.total
        }
      })
    },
    /** 歌单描述 展开/关闭 */
    toggleExpand() {
      if (this.expandIntro === "close") {
        this.expandIntro = "open";
      } else {
        this.expandIntro = "close";
      }
    },
    changeTabs(e) {
      // console.log(e);
      // let paneName = e.paneName
      // switch(paneName) {
      //   case 0 : 
      // }
    }
  },
};
</script>

<style lang="less" scoped>
.musicListDetail {
  // width: 100%;
  height: 100%;
  padding: 2rem;
  overflow: auto;
}
.musicListDesc {
  width: 100%;
  //   min-width: 50rem;
  height: auto;
  // border: 1px solid lightblue;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  &-left {
    width: 12rem;
    height: 12rem;
    min-width: 12rem;
    // border: 1px solid rgb(230, 173, 185);
    border-radius: 10px;
    img {
      width: 12rem;
      height: auto;
      border-radius: 10px;
    }
  }
  &-center {
    width: calc(100% - 12rem);
    min-width: 50rem;
    height: auto;
    // border: 1px solid rgb(230, 173, 185);
  }
}
.musicListDesc-center {
  padding: 5px;
}
.mld-center-title {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &_left {
    width: 2.5rem;
    margin: 0 5px;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    cursor: default;
  }
}
.mld-center-author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 6px 0;
  span {
    margin: 0 5px;
  }
  span:nth-of-type(2) {
    font-size: 12px;
    font-weight: 500;
    color: rgb(71, 135, 219);
  }
  span:nth-of-type(3) {
    font-size: 10px;
    font-weight: 400;
    color: rgb(117, 116, 116);
  }
}
.mld-center-desc {
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  margin: 8px 0;
  &-tags {
    display: flex;
    .breadcrumb-tags {
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      width: auto;
      &-item {
        display: flex;
        align-items: flex-start;
        span {
          cursor: pointer;
        }
        span:hover {
          color: rgb(63, 105, 160);
        }
      }
      &-item::after {
        content: "/";
        font-size: 1px;
        font-weight: 500;
        padding: 1px 5px 0px 5px;
        text-align: center;
      }
      &-item:last-child::after {
        content: none;
      }
    }
  }
  &-music {
    span {
      margin-right: 5px;
    }
  }
  &-introduction {
    width: 100%;
    position: relative;
    span {
      width: 90%;
    }
    /** 多行文本省略 */ 
    &-close {
      white-space: pre-wrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      height: auto;
    }
    /** 单行文本省略 */ 
    &-open {
      white-space: pre-wrap;
      text-overflow: ellipsis;
      display: block;
      height: auto;
    }
    .expand-introduction {
      position: absolute;
      top: 0;
      right: 1%;
      cursor: pointer;
    }
  }
}
</style>